<template>
    <div class="container">
        <div class="leftbox">
            <div class="head">
                <div class="img">
                    <img src="./img/Titan.jpg" style="width: 80px;height: 80px;"/>
                </div>
                {{username}}
            </div>
            <div class="home" v-on:click="click1" v-bind:class="color1"><i class="fa fa-home"></i>首页</div>
            <div class="goods" v-on:click="click2" v-bind:class="color2"><i class="fa fa-bookmark"></i>商品管理</div>
            <div class="indent" v-on:click="click3" v-bind:class="color3"><i class="fa fa-file-o"></i>订单管理</div>
            <div class="finance" v-on:click="click4" v-bind:class="color4"><i class="fa fa-percent"></i>财务管理</div>
            <div class="data" v-on:click="click5" v-bind:class="color5"><i class="fa fa-bar-chart"></i>数据分析</div>
            <div class="setting" v-on:click="click6" v-bind:class="color6"><i class="fa fa-cog"></i>系统设置</div>
        </div>
        <div class="box1">
            <div class="sbox1" v-on:click="handleClick1"><i class="fa fa-calendar-o"></i>任务
                <div class="hbox1" v-if="seen1">
                    <div class="hsbox1" v-bind:class="color11" v-on:mouseenter="enter1"  v-on:mouseleave="leave1">你有2个任务未完成</div>
                    <div class="hsbox2" v-bind:class="color12" v-on:mouseenter="enter2"  v-on:mouseleave="leave2">
                        <div class="hgbox1"><i class="fa fa-plus-square-o"></i></div>
                        <div class="hgbox2">添加属于你的<br/>第一个产品...</div>
                        <div class="hgbox3">未完成</div>
                    </div>
                    <div class="hsbox3" v-bind:class="color13" v-on:mouseenter="enter3"  v-on:mouseleave="leave3">
                        <div class="hgbox4"><i class="fa fa-lock"></i></div>
                        <div class="hgbox5">设置管理权限<br/>设置初始密码</div>
                        <div class="hgbox6">未完成</div>
                    </div>
                </div>
            </div>
            <div class="sbox2" v-on:click="handleClick2"><i class="fa fa-envelope-o"></i>消息
                <div class="hbox2" v-if="seen2">
                    <div class="hsbox1" v-bind:class="color14" v-on:mouseenter="enter4"  v-on:mouseleave="leave4">你有2个消息待处理</div>
                    <div class="hsbox2" v-bind:class="color15" v-on:mouseenter="enter5"  v-on:mouseleave="leave5">
                        <div class="hgbox1"><i class="fa fa-plus-square-o"></i></div>
                        <div class="hgbox2">有2个待入库<br/>订单待处理。</div>
                        <div class="hgbox3">3分钟前</div>
                    </div>
                    <div class="hsbox3" v-bind:class="color16" v-on:mouseenter="enter6"  v-on:mouseleave="leave6">
                        <div class="hgbox4"><i class="fa fa-lock"></i></div>
                        <div class="hgbox5">有5个代发货<br/>订单待处理。</div>
                        <div class="hgbox6">5分钟前</div>
                    </div>
                </div>
            </div>
            <div class="sbox3" v-on:click="handleClick3"><i class="fa fa-user-circle"></i>{{username}}
                <div class="administrator" v-if="seen3">
                    <div class="sonadministrator1" v-bind:class="color17" v-on:mouseenter="enter7"  v-on:mouseleave="leave7">系统设置</div>
                    <a href="./login.html"><div class="sonadministrator2" v-bind:class="color18" v-on:mouseenter="enter8"  v-on:mouseleave="leave8">安全退出</div></a>
                </div>
            </div>
        </div>
        <div v-if="hpseen1">
            <div class="centerLeftTop">
                <i class="fa fa-eye"></i>
                <div class="text1">
                    浏览量<br/>
                    239,234
                </div>
            </div>
            <div class="centerTop">
                <div class="text2">
                    订单量<br/>
                    239,234
                </div>
            </div>
            <div class="centerRightTop">
                <i class="fa fa-database"></i>
                <div class="text3">
                    总金额<br/>
                    239,234
                </div>
            </div>
            <div class="centerLeft">
                <div class="text41"><i class="fa fa-circle"></i>待办事项</div>
                <div class="text42">
                    <i class="fa fa-list"></i>
                    <div class="texttop">共有30条待处理的订单</div>
                    <div class="textbottom">商家产品重要的一步，就是为你的产品穿上了花的<br/>外套（文案），好的产品描述还可以促进你和客户<br/>之间的关系，不仅可提高销售量，还可以提高复购率</div>
                    <button class="button1">立即处理</button>
                </div>
                <div class="text43">
                    <i class="fa fa-arrows-alt"></i>
                    <div class="texttop">共有25条待换货的订单</div>
                    <div class="textbottom">商家产品重要的一步，就是为你的产品穿上了花的<br/>外套（文案），好的产品描述还可以促进你和客户<br/>之间的关系，不仅可提高销售量，还可以提高复购率</div>
                    <button class="button1">立即处理</button>
                </div>
            </div>
            <div class="centerRight">
                <div class="text51"><i class="fa fa-circle"></i>商品零售量统计</div>
                <div class="text52">商品数量
                    <div class="text521">¥5,630</div>
                </div>
                <div class="text53">
                    <img src="./img/Titan.jpg" class="img1"/>
                    商品名称
                    <div class="goodsstyle">商品属性</div>
                    <div class="price">¥500</div>
                </div>
                <div class="text54">
                    <img src="./img/Titan.jpg" class="img1"/>
                    商品名称
                    <div class="goodsstyle">商品属性</div>
                    <div class="price">¥500</div>
                </div>
                <div class="text55">
                    <img src="./img/Titan.jpg" class="img1"/>
                    商品名称
                    <div class="goodsstyle">商品属性</div>
                    <div class="price">¥500</div>
                </div>
            </div>
            <div class="centerLeftBottom">
                <div class="text61"><i class="fa fa-circle"></i>零售趋势图</div>
                <div class="text62" id="line"></div>
            </div>
            <div class="centerRightBottom">
                <div class="text71"><i class="fa fa-circle"></i>用户统计环形图</div>
                <div class="text72" id="pie"></div>
            </div>
        </div>
        <div class="tbbox" v-if="hpseen2">
            <div class="stbbox1">
                <div class="stb1" v-on:click="box3click">商品管理</div>
                <div class="line1"></div>
                <div class="stb2" v-on:click="box4click"><i class="fa fa-plus-square-o"></i>添加商品</div>
                <div class="line2"></div>
                <div class="stb3" v-on:click="box5click"><i class="fa fa-th-list"></i>分类管理</div>
                <div v-if="indexseen">
                    <div class="stb4"><i class="fa fa-search"></i></div>
                    <div class="line3"></div>
                    <div class="stb5"><i class="fa fa-filter"></i></div>
                    <div class="line4"></div>
                    <div class="stb6" v-on:click="box6click"><i class="fa fa-window-restore"></i>切换查看</div>
                </div>
            </div>
            <div class="stbbox2" v-if="seen4">
                <div class="goodsprice1">
                    <div class="goodsimg"><img src="./img/Titan.jpg" /></div>
                    <div class="goodsmessage">
                        <div name="price" class="goodsprice">￥123</div>
                        <div name="goodsname" class="goodsname">航海王</div>
                        <div class="goodsupdate"><i class="fa fa-pencil"></i></div>
                        <div class="goodsdelete"><i class="fa fa-trash"></i></div>
                    </div>
                </div>
                <div class="goodsprice2">
                    <div class="goodsimg"><img src="./img/Titan.jpg" /></div>
                    <div class="goodsmessage">
                        <div class="goodsprice">￥123</div>
                        <div class="goodsname">航海王</div>
                        <div class="goodsupdate"><i class="fa fa-pencil"></i></div>
                        <div class="goodsdelete"><i class="fa fa-trash"></i></div>
                    </div>
                </div>
                <div class="goodsprice3">
                    <div class="goodsimg"><img src="./img/Titan.jpg" /></div>
                    <div class="goodsmessage">
                        <div class="goodsprice">￥123</div>
                        <div class="goodsname">航海王</div>
                        <div class="goodsupdate"><i class="fa fa-pencil"></i></div>
                        <div class="goodsdelete"><i class="fa fa-trash"></i></div>
                    </div>
                </div>
                <div class="goodsprice4">
                    <div class="goodsimg"><img src="./img/Titan.jpg" /></div>
                    <div class="goodsmessage">
                        <div class="goodsprice">￥123</div>
                        <div class="goodsname">航海王</div>
                        <div class="goodsupdate"><i class="fa fa-pencil"></i></div>
                        <div class="goodsdelete"><i class="fa fa-trash"></i></div>
                    </div>
                </div>
                <div class="goodsprice5">
                    <div class="goodsimg"><img src="./img/Titan.jpg" /></div>
                    <div class="goodsmessage">
                        <div class="goodsprice">￥123</div>
                        <div class="goodsname">航海王</div>
                        <div class="goodsupdate"><i class="fa fa-pencil"></i></div>
                        <div class="goodsdelete"><i class="fa fa-trash"></i></div>
                    </div>
                </div>
                <div class="goodsprice6">
                    <div class="goodsimg"><img src="./img/Titan.jpg" /></div>
                    <div class="goodsmessage">
                        <div class="goodsprice">￥123</div>
                        <div class="goodsname">航海王</div>
                        <div class="goodsupdate"><i class="fa fa-pencil"></i></div>
                        <div class="goodsdelete"><i class="fa fa-trash"></i></div>
                    </div>
                </div>
                <div class="goodsprice7">
                    <div class="goodsimg"><img src="./img/Titan.jpg" /></div>
                    <div class="goodsmessage">
                        <div class="goodsprice">￥123</div>
                        <div class="goodsname">航海王</div>
                        <div class="goodsupdate"><i class="fa fa-pencil"></i></div>
                        <div class="goodsdelete"><i class="fa fa-trash"></i></div>
                    </div>
                </div>
                <div class="goodsprice8">
                    <div class="goodsimg"><img src="./img/Titan.jpg" /></div>
                    <div class="goodsmessage">
                        <div class="goodsprice">￥123</div>
                        <div class="goodsname">航海王</div>
                        <div class="goodsupdate"><i class="fa fa-pencil"></i></div>
                        <div class="goodsdelete"><i class="fa fa-trash"></i></div>
                    </div>
                </div>
                <div class="goodsprice9">
                    <div class="goodsimg"><img src="./img/Titan.jpg" /></div>
                    <div class="goodsmessage">
                        <div class="goodsprice">￥123</div>
                        <div class="goodsname">航海王</div>
                        <div class="goodsupdate"><i class="fa fa-pencil"></i></div>
                        <div class="goodsdelete"><i class="fa fa-trash"></i></div>
                    </div>
                </div>
                <div class="goodsprice10">
                    <div class="goodsimg"><img src="./img/Titan.jpg" /></div>
                    <div class="goodsmessage">
                        <div class="goodsprice">￥123</div>
                        <div class="goodsname">航海王</div>
                        <div class="goodsupdate"><i class="fa fa-pencil"></i></div>
                        <div class="goodsdelete"><i class="fa fa-trash"></i></div>
                    </div>
                </div>
                <div class="index1">
                    <div class="sindex1"><i class="fa fa-chevron-left"></i></div>
                    <div class="sindex1" v-for="i in num" v-bind:key="i">{{i}}</div>
                    <div class="sindex1"><i class="fa fa-chevron-right"></i></div>
                </div>
            </div>
            <div class="stbbox3" v-if="seen5">
                <div class="longgoodsmessage1">
                    <div class="lgmimg"><img src="./img/Titan.jpg" /></div>
                    <div class="lgmname">货物名称货物名称货物名称</div>
                    <div class="lgmprice">￥123</div>
                    <div class="lgmstatus">拣货中</div>
                    <div class="lgmupdate"><i class="fa fa-pencil"></i></div>
                    <div class="lgmdelete"><i class="fa fa-trash"></i></div>
                </div>
                <div class="longgoodsmessage2">
                    <div class="lgmimg"><img src="./img/Titan.jpg" /></div>
                    <div class="lgmname">货物名称货物名称货物名称</div>
                    <div class="lgmprice">￥123</div>
                    <div class="lgmstatus">拣货中</div>
                    <div class="lgmupdate"><i class="fa fa-pencil"></i></div>
                    <div class="lgmdelete"><i class="fa fa-trash"></i></div>
                </div>
                <div class="longgoodsmessage3">
                    <div class="lgmimg"><img src="./img/Titan.jpg" /></div>
                    <div class="lgmname">货物名称货物名称货物名称</div>
                    <div class="lgmprice">￥123</div>
                    <div class="lgmstatus">拣货中</div>
                    <div class="lgmupdate"><i class="fa fa-pencil"></i></div>
                    <div class="lgmdelete"><i class="fa fa-trash"></i></div>
                </div>
                <div class="longgoodsmessage4">
                    <div class="lgmimg"><img src="./img/Titan.jpg" /></div>
                    <div class="lgmname">货物名称货物名称货物名称</div>
                    <div class="lgmprice">￥123</div>
                    <div class="lgmstatus">拣货中</div>
                    <div class="lgmupdate"><i class="fa fa-pencil"></i></div>
                    <div class="lgmdelete"><i class="fa fa-trash"></i></div>
                </div>
                <div class="index2">
                    <div class="sindex2"><i class="fa fa-chevron-left"></i></div>
                    <div class="sindex2" v-for="i in num" v-bind:key="i">{{i}}</div>
                    <div class="sindex2"><i class="fa fa-chevron-right"></i></div>
                </div>
            </div>
            <div class="stbbox4" v-if="seen6">
                <div class="goods1">
                    <div class="sg1">百货</div>
                    <div class="message1">
                        <h4>商品</h4>已有个数<h4>300</h4>
                    </div>
                </div>
                <div class="goods2">
                    <div class="sg2">美妆</div>
                    <div class="message2">
                        <h4>商品</h4>已有个数<h4>300</h4>
                    </div>
                </div>
                <div class="goods3">
                    <div class="sg3">男装</div>
                    <div class="message3">
                        <h4>商品</h4>已有个数<h4>300</h4>
                    </div>
                </div>
                <div class="goods4">
                    <div class="sg4">母婴</div>
                    <div class="message4">
                        <h4>商品</h4>已有个数<h4>300</h4>
                    </div>
                </div>
                <div class="goods5">
                    <div class="sg5">美食</div>
                    <div class="message5">
                        <h4>商品</h4>已有个数<h4>300</h4>
                    </div>
                </div>
                <div class="goods6">
                    <div class="sg6">水果</div>
                    <div class="message6">
                        <h4>商品</h4>已有个数<h4>300</h4>
                    </div>
                </div>
                <div class="goods7">
                    <div class="sg7">女装</div>
                    <div class="message7">
                        <h4>商品</h4>已有个数<h4>300</h4>
                    </div>
                </div>
                <div class="goods8">
                    <div class="sg8">数码</div>
                    <div class="message8">
                        <h4>商品</h4>已有个数<h4>300</h4>
                    </div>
                </div>
                <div class="goods9">
                    <div class="sg9"><i class="fa fa-plus"></i></div>
                    <div class="message9">
                        <h4>新增分类</h4>
                    </div>
                </div>
                <div class="save">保存</div>
                <div class="cancel">取消</div>
            </div>
            <div class="stbbox5" v-if="seen7">
                <div class="updateselect">商品分类:&nbsp;
                    <select>
                        <option>百货</option>
                        <option>美妆</option>
                        <option>男装</option>
                        <option>母婴</option>
                        <option>美食</option>
                        <option>水果</option>
                        <option>女装</option>
                        <option>数码</option>
                    </select>
                </div>
                <div class="updatename">商品名称:&nbsp;
                    <input type="text" />
                </div>
                <div class="updateprice">商品价格:&nbsp;
                    <input type="text" />
                </div>
                <div class="updateimg">商品图片:&nbsp;
                    <div class="addimg">
                        <i class="fa fa-plus addimage"></i>
                    </div>
                </div>
                <div class="updatemessage">商品详情:&nbsp;
                    <textarea name="common"></textarea>
                </div>
                <div class="save1">保存</div>
                <div class="cancel1">取消</div>
            </div>
        </div>
    </div>
</template>

<script>

module.exports = {
    data() {
        axios.get("/login1").then((r) => {
            console.log(this);
            this.username = r.data;
        });
        return {
            username: "",
            color1: "click2",
            color2: "click1",
            color3: "click1",
            color4: "click1",
            color5: "click1",
            color6: "click1",
            // --------------
            seen1: false,
            seen2: false,
            seen3: false,
            color11: "leave",
            color12: "leave",
            color13: "leave",
            color14: "leave",
            color15: "leave",
            color16: "leave",
            color17: "leave",
            color18: "leave",
            // --------------
            hpseen1: true,
            // --------------
            hpseen2: false,
            //---------------
            seen4: true,
            seen5: false,
            seen6: false,
            seen7: false,
            num: 5,
            indexseen: true
        }
    },
    methods: {
        click1(){
            this.hpseen1 = true,
            this.hpseen2 = false,
            this.color1 = "click2",
            this.color2 = "click1",
            this.color3 = "click1",
            this.color4 = "click1",
            this.color5 = "click1",
            this.color6 = "click1"
        },
        click2(){
            this.hpseen1 = false,
            this.hpseen2 = true,
            this.color1 = "click1",
            this.color2 = "click2",
            this.color3 = "click1",
            this.color4 = "click1",
            this.color5 = "click1",
            this.color6 = "click1"
        },
        click3(){
            this.color1 = "click1",
            this.color2 = "click1",
            this.color3 = "click2",
            this.color4 = "click1",
            this.color5 = "click1",
            this.color6 = "click1"
        },
        click4(){
            this.color1 = "click1",
            this.color2 = "click1",
            this.color3 = "click1",
            this.color4 = "click2",
            this.color5 = "click1",
            this.color6 = "click1"
        },
        click5(){
            this.color1 = "click1",
            this.color2 = "click1",
            this.color3 = "click1",
            this.color4 = "click1",
            this.color5 = "click2",
            this.color6 = "click1"
        },
        click6(){
            this.color1 = "click1",
            this.color2 = "click1",
            this.color3 = "click1",
            this.color4 = "click1",
            this.color5 = "click1",
            this.color6 = "click2"
        },
        // ------------------------
        handleClick1(){
            this.seen1 =! this.seen1;
            this.seen2 = false;
            this.seen3 = false;
        },
        handleClick2(){
            this.seen2 =! this.seen2;
            this.seen1 = false;
            this.seen3 = false;
        },
        handleClick3(){
            this.seen3 =! this.seen3;
            this.seen1 = false;
            this.seen2 = false;
        },
        enter1(){
            this.color11 = "enter";
        },
        leave1(){
            this.color11 = "leave";
        },
        enter2(){
            this.color12 = "enter";
        },
        leave2(){
            this.color12 = "leave";
        },
        enter3(){
            this.color13 = "enter";
        },
        leave3(){
            this.color13 = "leave";
        },
        enter4(){
            this.color14 = "enter";
        },
        leave4(){
            this.color14 = "leave";
        },
        enter5(){
            this.color15 = "enter";
        },
        leave5(){
            this.color15 = "leave";
        },
        enter6(){
            this.color16 = "enter";
        },
        leave6(){
            this.color16 = "leave";
        },
        enter7(){
            this.color17 = "enter";
        },
        leave7(){
            this.color17 = "leave";
        },
        enter8(){
            this.color18 = "enter";
        },
        leave8(){
            this.color18 = "leave";
        },
        // -------------------------
        box3click(){
            this.seen4 = true;
            this.seen5 = false;
            this.seen6 = false;
            this.seen7 = false;
            this.indexseen = true;
        },
        box4click(){
            this.seen4 = false;
            this.seen5 = false;
            this.seen6 = false;
            this.seen7 = true;
            this.indexseen = false;
        },
        box5click(){
            this.seen4 = false;
            this.seen5 = false;
            this.seen6 = true;
            this.seen7 = false;
            this.indexseen = false;
        },
        box6click(){
            this.seen6 = false;
            this.seen7 = false;
            this.seen4 =! this.seen4;
            if(this.seen4 == true){
                this.seen5 = false;
            }else{
                this.seen5 = true;
            }
        }
    }
}
</script>

<style>
</style>